<template>
  <div style="border-radius: 5px; width: 98%; height: 700px; background: white; margin-top: 10px">
    <div class="handle-box" style="margin-left: 22%">
      <el-button class="modify" @click="handleInsert"
        ><Plus style="width: 1em; height: 1em; margin-right: 8px" />添加</el-button
      >
      <el-button class="modify" @click="handleDelete(pid)"
        ><Delete style="width: 1em; height: 1em; margin-right: 8px" /> 删除</el-button
      >
      <el-input
        style="margin-left: 20%"
        v-model="selectWord"
        size="medium"
        placeholder="电影/影厅"
        class="handle-input"
      ></el-input>
      <el-button class="modify" @click="selectSessions">点击查询</el-button>
    </div>
    <el-table
      size="mini"
      :data="data"
      @selection-change="handleSelectionChange"
      style="width: 92%; margin-left: 25%"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="mname" label="电影" align="center"></el-table-column>
      <el-table-column prop="cname" label="所属影厅" align="center"></el-table-column>
      <el-table-column prop="price" label="票价" align="center"></el-table-column>
      <el-table-column prop="playTime" label="放映时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button class="modify" @click="handleEdit(scope.row)"
            ><Edit style="width: 1em; height: 1em; margin-right: 8px" /> 编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total,prev,pager,next"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <AdminArrangementDialog
      :multipleSelection="multipleSelection"
      :editRow="editRow"
      :insertOrEdit="insertOrEdit"
      @getArrangementData="getArrangementData"
    ></AdminArrangementDialog>
  </div>
</template>
<script setup>
import { onMounted, ref, computed } from 'vue'
import { useStore } from 'vuex'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import AdminArrangementDialog from '../../components/Admin/AdminArrangementDialog.vue'

const store = useStore()
const pid = ref('')
const tableData = ref([])
const tempData = ref([])

function getArrangementData() {
  // 使用axios获得所有场次信息
  axios
    .get('/api/plan/getAllPlan')
    .then((res) => {
      tableData.value = res.data
      tempData.value = res.data
    })
    .catch(() => {
      ElMessage.warning('获取场次信息失败！')
    })
}

const currentPage = ref(1)
const pageSize = ref(5)

function handleCurrentChange(val) {
  currentPage.value = val
}

const data = computed(() => {
  return tableData.value.slice((currentPage.value - 1) * pageSize.value)
})

const selectWord = ref('')

// 根据电影名或影厅名查询
function selectSessions() {
  if (selectWord.value === '') {
    tableData.value = tempData.value
  } else {
    tableData.value = []
    for (const item of tempData.value) {
      if (item.mname.includes(selectWord.value) || item.cname.includes(selectWord.value)) {
        tableData.value.push(item)
      }
    }
  }
}

// 多选
const multipleSelection = ref([])
function handleSelectionChange(val) {
  multipleSelection.value = val
}

// const theaterData = ref([])

const idx = ref('')

// 用来判断当前执行的是增添场次 还是编辑场次 1-增加  0-编辑  传给子组件 用于复用判断
const insertOrEdit = ref(1)

function handleInsert() {
  insertOrEdit.value = 1
  store.commit('setArrAddOrEditDV', true)
}
// 当前被编辑的行信息
const editRow = ref('')
// 打开EditDialog 并把当前行的值传进子组件
function handleEdit(row) {
  insertOrEdit.value = 0
  editRow.value = row
  // 复用 增加和编辑Dialog都是同一个
  store.commit('setArrAddOrEditDV', true)
}

// 打开delDialog
function handleDelete(id) {
  // 想办法传值idx
  idx.value = id
  store.commit('setArrAddOrEditDV', true)
}

onMounted(() => {
  getArrangementData()
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/adminPhone/phoneAdminArrangement.scss';
</style>
